<!doctype html>
<html lang="zh-CN" style="height:100%">
<head>
<meta charset="utf-8">
<title>canvas-图形变幻</title>
</head>

<body style="height:100%">
<canvas id="canvas1" style="border:1px solid #ccc">不支持canvas</canvas>

<script>
var WINDOW_WIDTH,WINDOW_HEIGHT;

var canvas1 = document.getElementById("canvas1");
//2d绘图模式
var context1 = canvas1.getContext("2d");

window.onload = function(){
	//自适应配置
	WINDOW_WIDTH = document.body.clientWidth;
	WINDOW_HEIGHT = document.body.clientHeight;

	canvas1.width = WINDOW_WIDTH;
	canvas1.height = WINDOW_HEIGHT;

	context1.font = "bold 20px Arial";
	context1.save();	//保存之前状态，与 restore 方法之间的任意状态改变都不会影响后续代码
	context1.beginPath();
	context1.translate(100,100);	//位移
	context1.rotate(30);	//旋转
	context1.scale(2,2);	//缩放，注：scale 方法会应用于所有可缩放的属性，如：位移等
	context1.fillStyle = "#aaa";
	context1.fillRect(0,0,50,50);
	context1.restore();	//恢复上一次保存的状态

	context1.save();
	/*
	一、
	图形变换矩阵说明：
	a c e
	b d f
	0 0 1
	a 水平缩放（1）
	b 水平倾斜（0）
	c 垂直倾斜（0）
	d 垂直缩放（1）
	e 水平位移（0）
	f 垂直位移（0）
	*/
	//transform(a,b,c,d,e,f) 图形变换，参数见矩阵说明，该方法状态模式 translate、rotate、scale 一致
	context1.transform(1,0,0,1,0,0);
	//重置图形变换
	context1.setTransform(2,0,1,2,200,200);
	context1.fillRect(0,0,50,50);
	context1.restore();
	
	//二、填充
	//创建一个线性渐变对象
	context1.save();
	var linearGrad = context1.createLinearGradient(0,500,500,700);	//渐变起点 x,y 渐变终点 x2,y2
	linearGrad.addColorStop(0.0,"#fff");
	linearGrad.addColorStop(1.0,"#000");
	context1.fillStyle = linearGrad;
	context1.fillRect(0,500,500,200);
	context1.restore();
	//创建一个放射渐变对象
	context1.save();
	var radialGrad = context1.createRadialGradient(600,600,0,600,600,100);	//渐变起点圆心、半径 x,y,r 渐变终点圆心、半径 x2,y2,r2
	radialGrad.addColorStop(0.0,"#fff");
	radialGrad.addColorStop(1.0,"#000");
	context1.fillStyle = radialGrad;
	context1.fillRect(500,500,200,200);
	context1.restore();
	//创建一个 canvas 对象填充
	context1.save();
	var canvas2 = document.createElement("canvas");	//动态创建 canvas 画布
	canvas2.width = 100;
	canvas2.height = 100;
	var context2 = canvas2.getContext("2d");
	context2.fillStyle = "#d00";
	context2.fillRect(0,0,50,50);
	var pattern = context1.createPattern(canvas2,"repeat-x");
	context1.lineWidth = 2;
	context1.fillStyle = pattern;
	context1.fillRect(0,0,500,500);
	context1.strokeRect(0,0,500,500);
	context1.restore();
	/*
	strokeStyle 绘制路径与 fillStyle 相同，也可以传入上述对象。
	*/

	//三、阴影、透明、遮挡
	context1.save();
	context1.fillText("阴影、透明、遮挡",600,20);
	context1.arc(570,70,50,0,2*Math.PI);
	context1.fill();
	context1.globalAlpha = 0.5;	//全局透明度
	context1.globalCompositeOperation = "destination-over";	//图形的遮挡方式，默认：source-over
	context1.shadowColor = "gray";
	context1.shadowOffsetX = 5;
	context1.shadowOffsetY = 5;
	context1.shadowBlur = 2;	//阴影模糊值 0 - 不模糊
	context1.fillRect(550,50,100,100);
	context1.restore();

	//四、剪辑区域
	context1.save();
	context1.arc(800,600,45,0,2*Math.PI);
	context1.clip();	//需要先设置一个路径，再使用 clip 之后仅路径内画面会显示
	context1.fillText("剪切区域 ",750,600);
	context1.restore();

	//五、canvas 事件
	canvas1.addEventListener("mouseup",detect);
};

function detect(event){
	//获取鼠标位置的坐标轴
	var x = event.clientX - canvas1.getBoundingClientRect().left;
	var y = event.clientY - canvas1.getBoundingClientRect().top;

	context1.beginPath();
	context1.arc(570,70,50,0,2*Math.PI);
	//判断坐标是否在路径范围内
	if(context1.isPointInPath(x,y)){
		context1.fillStyle = "red";
		context1.fill();
	}else{
		alert("当前坐标轴："+x+"，"+y);
	}
}

</script>

</body>
</html>